/*base*/
body,html,div,p,table,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0px;padding:0px;}
ul,ol,li,dl,dt,dd{list-style:none;}
img,a{border:none;}
em,i{font-style:normal;}
a{outline:none;text-decoration:none;-webkit-tap-highlight-color:rgba(255,0,0,0);}
a:active{background:rgba(1,148,225,0.2);}
body{font-family:"微软雅黑",Arial,Helvetica;font-weight:normal;text-shadow:none;background:#fff;width:100%;height:100%;position:relative;margin:0px;padding:0px;}
.clear{width:0px;height:0px;font-size:0px;line-height:0px;clear:both;overflow:hidden;}

/*页面框架*/
#web_wrap{
	-webkit-transform-origin:top;
	transform-origin:top;
	width:320px;
	margin:0px auto;
	position:relative;
	/*-webkit-transition:0.3s;
	-ms-transition:0.3s;
	-moz-transition:0.3s;
	transition:0.3s;
	right:0px;*/
}

/*页面内容*/
.container{width:320px;margin:0px auto;position:relative;}

.bg_box{width:320px;min-height:625px;background:#3c4b55 url(../images/bg02.jpg) center top no-repeat;background-size:320px auto;position:relative;}
.bg_box .rule{display:block;width:67px;height:20px;background:#fff;border:1px solid #37bc9b;border-radius:5px;text-align:center;padding:4px 0px 1px 0px;font-size:14px;color:#37bc9b;float:right;margin-top:20px;margin-right:10px;}
.bg_box .rule:active{background:#1cfcc4;}

.rulecon{width:100%;min-height:500px;background:#eeeeee;position:relative;float:left;margin-top:180px;padding-bottom:100px;}
.rulecon h3{font-size:18px;width:100%;text-align:center;margin-top:20px;font-weight:normal;}
.rulecon p{width:280px;margin-left:20px;font-size:12px;color:#111;line-height:22px;margin-top:20px;}
.rulecon p em{color:#37bc9b;}
.rulecon .coderule{width:80%;margin:10px auto;display:block;border-radius:5px;}
.icepic{position:absolute;left:15px;top:-20px;width:39px;}

.friend{color:#ffa800;font-size:12px;width:200px;-webkit-transform:scale(0.8);position:relative;top:22px;}

.prizecon{background:#fff;}
.prizecon h3{font-size:16px;color:#ffa800;}
.prizecon p{color:#666666;font-size:14px;}
.prizecon h5{width:280px;margin-left:14px;font-size:14px;color:#666666;text-align:center;font-weight:normal;}
.prizecon input{display:inline-block;width:200px;height:34px;background:#eeeeee;color:#999999;line-height:34px;text-indent:10px;border:none;margin-left:60px;margin-bottom:10px;border-radius:5px;outline:none;}
.prizecon input:nth-of-type(1){margin-top:30px;}
.prizecon .getPri{background:#ffa800;color:#fff;text-align:center;text-indent:0px;height:40px;line-height:40px;margin-top:10px;}
.prizecon .getPri:hover{background:#fed584;}
.prizecon h6{color:#999999;font-size:12px;width:260px;margin-left:32px;-webkit-transform:scale(0.8);margin-top:-10px;font-weight:normal;}


.game_user{position:absolute;top:220px;}
.game_user_box{width:60px;text-align:center;position:absolute;}
.game_user_box p{width:100%;text-align:center;font-size:12px;background:#ff8b00;color:#fff;border-radius:10px;padding:1px 0px;position:absolute;margin-top:-20px;-webkit-transform:scale(0.8);}
.game_user_box img{display:inline-block;width:40px;border-radius:50%;border:2px solid #fff;}
.user1{left:35px;top:-5px;}
.user2{left:130px;top:-5px;}
.user3{left:220px;top:-5px;}
.user4{left:80px;top:25px;}
.user5{left:178px;top:25px;}

.game_info{color:#fff;font-size:14px;text-align:center;position:absolute;top:325px;}
.game_info p{display:inline-block;width:100%;text-align:center;line-height:20px;letter-spacing:1px;margin:0px auto;}
.game_info em{color:#ff8b00;font-size:18px;}
.game_info .again{display:inline-block;width:180px;height:43px;background:#ffa800;line-height:43px;text-align:center;color:#fff;border-radius:5px;margin-top:25px;}
.game_info .again:active{background:#ffd800;}

.game_info .event_over{padding:5px;border:1px solid #ffa800;width:230px;margin-top:10px;color:#ffa800;margin-left:0px;}

.game_info .playtoo{display:inline-block;width:110px;height:43px;background:#ffa800;line-height:43px;text-align:center;color:#fff;border-radius:5px;margin-top:25px;}
.game_info .playtoo:nth-of-type(1){background:#fd6530;margin-right:15px;}

.btnMove{
-webkit-animation:wobble 1s .2s ease both infinite;
-moz-animation:wobble 1s .2s ease both infinite;
-ms-animation:wobble 1s .2s ease both infinite;
animation:wobble 1s .2s ease both infinite;
}

@-webkit-keyframes wobble{
	0%{-webkit-transform:translateX(0%)}
	15%{-webkit-transform:translateX(-20%) rotate(-5deg)}
	30%{-webkit-transform:translateX(15%) rotate(3deg)}
	45%{-webkit-transform:translateX(-10%) rotate(-3deg)}
	60%{-webkit-transform:translateX(5%) rotate(2deg)}
	75%{-webkit-transform:translateX(-2%) rotate(-1deg)}
	100%{-webkit-transform:translateX(0%)}
}
@-moz-keyframes wobble{
	0%{-moz-transform:translateX(0%)}
	15%{-moz-transform:translateX(-20%) rotate(-5deg)}
	30%{-moz-transform:translateX(15%) rotate(3deg)}
	45%{-moz-transform:translateX(-10%) rotate(-3deg)}
	60%{-moz-transform:translateX(5%) rotate(2deg)}
	75%{-moz-transform:translateX(-2%) rotate(-1deg)}
	100%{-moz-transform:translateX(0%)}
}
@-ms-keyframes wobble{
	0%{-ms-transform:translateX(0%)}
	15%{-ms-transform:translateX(-20%) rotate(-5deg)}
	30%{-ms-transform:translateX(15%) rotate(3deg)}
	45%{-ms-transform:translateX(-10%) rotate(-3deg)}
	60%{-ms-transform:translateX(5%) rotate(2deg)}
	75%{-ms-transform:translateX(-2%) rotate(-1deg)}
	100%{-ms-transform:translateX(0%)}
}
@keyframes wobble{
	0%{transform:translateX(0%)}
	15%{transform:translateX(-20%) rotate(-5deg)}
	30%{transform:translateX(15%) rotate(3deg)}
	45%{transform:translateX(-10%) rotate(-3deg)}
	60%{transform:translateX(5%) rotate(2deg)}
	75%{transform:translateX(-2%) rotate(-1deg)}
	100%{transform:translateX(0%)}
}


.game_info h5{color:#37bc9b;font-size:16px;margin-top:5px;}
.game_info h5 a{color:#37bc9b;}
.game_info h5 i{display:inline-block;width:16px;height:13px;background:url(../images/icon.png) 0px -160px no-repeat;background-size:499px auto;margin-right:5px;}

.ranking{width:288px;min-height:300px;background:rgba(76,93,105,0.7);border:1px solid #61bc62;border-radius:10px;float:left;margin-top:460px;margin-left:15px;position:relative;padding-bottom:20px;}
.ranking_winners{border:1px solid #ffd52b;}
.ranking_title{width:201px;height:36px;line-height:24px;background:url(../images/icon.png) 0px 0px no-repeat;background-size:500px auto;font-size:18px;color:#fff;text-align:center;position:absolute;left:40px;top:-11px;}
.winners{background:url(../images/icon.png) -232px 0px no-repeat;background-size:500px auto;}
.ranking h4{font-size:12px;color:#fff;width:100%;text-align:center;position:absolute;top:30px;letter-spacing:1px;font-weight:normal;}
.ranking h4 em{color:#ffa800;}

.noranking{padding-bottom:120px;padding-top:30px;text-align:center;width:280px;margin:0px auto;border-radius:10px;}
.noranking h3{color:#37bc9b;font-size:18px;}
.noranking p{color:#fff;font-size:14px;text-align:left;width:280px;line-height:24px;margin-top:10px;width:100%;}
.noranking p em{color:#37bc9b;}
.noranking span{color:#c9c9c9;font-size:12px;text-align:left;display:inline-block;width:280px;}

.nameline{width:270px;margin:0px auto;margin-top:10px;}
.nameline .num1{width:22px;height:27px;background:url(../images/icon.png) 0px -67px no-repeat;background-size:500px auto;font-size:12px;color:#fff;text-align:center;line-height:32px;float:left;margin-top:8px;}
.nameline .num2{width:22px;height:27px;background:url(../images/icon.png) 0px -104px no-repeat;background-size:500px auto;font-size:12px;color:#a3a2a2;text-align:center;line-height:32px;float:left;margin-top:8px;}
.nameline .num3{width:22px;height:27px;background:url(../images/icon.png) 0px -67px no-repeat;background-size:500px auto;font-size:12px;color:#fff;text-align:center;line-height:32px;float:left;margin-top:8px;}
.nameline .num{width:20px;height:20px;font-size:12px;color:#fff;text-align:center;line-height:20px;float:left;margin-top:10px;border:1px solid #e4aa4e;border-radius:50%;}
.nameline img{float:left;width:41px;border-radius:50%;margin-left:10px;}
.nameline .name{float:left;color:#fff;font-size:14px;line-height:41px;margin-left:15px;}
.nameline .km{float:right;color:#fff;font-size:14px;line-height:41px;margin-right:5px;}


.footer{width:100%;height:99px;background:url(../images/footer_bg.png) center top no-repeat;background-size:320px auto;color:#858585;text-align:center;position:absolute;bottom:0px;}
.footer_text{position:absolute;top:35px;font-size:10px;width:100%;}
.footer p{display:inline-block;width:100%;text-align:center;line-height:0px;}
.footer p:nth-of-type(2){margin-top:3px;}

.suibianDL{width:320px;height:43px;background:#fff;position:relative;z-index:10;}
.suibianDL_left{float:left;width:200px;margin-left:5px;position:relative;height:40px;overflow:hidden;}
.suibianDL_left img{width:18%;float:left;margin-right:5px;margin-top:3px;}
.suibianDL_left h5{font-size:15px;color:#00b893;position:absolute;left:40px;top:2px;}
.suibianDL_left p{font-size:12px;color:#00b893;position:absolute;left:40px;top:22px;}

.suibianDL_right{float:right;}
.suibianDL_right a{display:inline-block;width:90px;height:43px;text-align:center;line-height:43px;color:#00b893;}



.shareto{width:183px;height:163px;background:url(../images/shareto.png) center top no-repeat;background-size:183px auto;position:absolute;left:125px;top:10px;z-index:10;color:#ffea00;}
.shareto p{margin-left:10px;font-size:14px;}
.shareto p em{color:#fd8054;}
.shareto p:nth-of-type(1){margin-top:100px;font-size:12px;}
.shareto p:nth-of-type(2){}
.overlay{width:100%;height:100%;position:absolute;left:0px;bottom:0px;background:#111;z-index:9;opacity:0.85;filter:alpha(opacity=85);}


.loading_box{position:absolute;width:100%;height:100%;background:#fff;left:0px;top:0px;z-index:999;}
.runloading{
	width:96px;height:90px;background:url(../images/loading.gif) center top no-repeat;background-size:96px auto;
	margin-left:110px;margin-top:140px;
	/*-webkit-animation:bgscroll 0.7s linear infinite;
	-moz-animation:bgscroll 0.7s linear infinite;
	-ms-animation:bgscroll 0.7s linear infinite;
	animation:bgscroll 0.7s linear infinite;*/
}
.runloading p{width:100%;text-align:center;color:#543737;position:relative;}
.runloading p:nth-of-type(1){top:90px;}
.runloading p:nth-of-type(2){color:#ffa800;font-size:18px;top:95px;width:200px;left:-50px;text-align:center;}


/*@-webkit-keyframes bgscroll{
	0%{background:url(../images/loading/2.png) center top no-repeat;background-size:96px auto;}
	10%{background:url(../images/loading/3.png) center top no-repeat;background-size:96px auto;}
	20%{background:url(../images/loading/4.png) center top no-repeat;background-size:96px auto;}
	30%{background:url(../images/loading/5.png) center top no-repeat;background-size:96px auto;}
	40%{background:url(../images/loading/6.png) center top no-repeat;background-size:96px auto;}
	50%{background:url(../images/loading/7.png) center top no-repeat;background-size:96px auto;}
	60%{background:url(../images/loading/8.png) center top no-repeat;background-size:96px auto;}
	70%{background:url(../images/loading/9.png) center top no-repeat;background-size:96px auto;}
	80%{background:url(../images/loading/10.png) center top no-repeat;background-size:96px auto;}
	90%{background:url(../images/loading/11.png) center top no-repeat;background-size:96px auto;}
	100%{background:url(../images/loading/12.png) center top no-repeat;background-size:96px auto;}
}
*/


.running_box{width:320px;height:480px;background:#535353 url(../images/run_bg.jpg) center top no-repeat;background-size:320px auto;position:relative;}
.running_box .cb{width:61px;height:63px;background:url(../images/icon.png) 0px -206px no-repeat;background-size:500px auto;position:absolute;left:132px;top:121px;}
.running_box .line{width:2px;height:79%;background:url(../images/line.png) center top repeat-y;background-size:2px auto;position:absolute;left:160px;top:186px;opacity:0;}
.running_box .qiu{
	width:37px;height:58px;background:url(../images/icon.png) -120px -206px no-repeat;background-size:500px auto;position:absolute;left:32px;top:90px;
	-webkit-animation:moveqiu 10s linear infinite;
	-moz-animation:moveqiu 10s linear infinite;
	-ms-animation:moveqiu 10s linear infinite;
	animation:moveqiu 10s linear infinite;
}

.running_count{position:absolute;z-index:20;left:0px;top:0px;font-size:36px;color:#ffa800;width:320px;display:none;}
/*.running_count p{text-shadow: 3px 0px 0px #fff,-3px 0px 0px #fff,0px 3px 0px #fff,0px -3px 0px #fff;}*/
.running_count p{-webkit-text-stroke:1px #fff;text-stroke:1px #fff;font-weight:bold;width:100%;text-align:center;}
.running_count p span{color:#ff3600;font-size:60px;padding:0px 5px;}

.runningover_wrap{width:196px;height:120px;position:absolute;left:60px;top:10px;z-index:2;opacity:0;transition:0.3s;}
.runningover_wrap .runningover_img{border-radius:50%;border:3px solid #fff;position:absolute;left:65px;top:0px;}
.runningover_wrap .runningover_img img{width:50px;height:50px;border-radius:50%;border:3px solid #d0d0d0;}
.runningover{width:196px;height:120px;background:url(../images/runover.png) center top no-repeat;background-size:196px auto;position:absolute;z-index:3;}
.runningover p{position:absolute;left:0px;top:46px;width:100%;text-align:center;color:#fff;font-size:14px;}
.runningover p span{font-size:18px;padding:0px;}
.runningover p:nth-of-type(2){color:#379142;font-size:12px;top:80px;}

.ready_title{width:212px;height:115px;background:url(../images/readygo.png) 0px 0px no-repeat;background-size:212px auto;position:absolute;left:60px;top:20px;transition:0.3s;}
.ready_title.active{background:url(../images/readygo.png) 0px -120px no-repeat;background-size:212px auto;}

.line.active{
	-webkit-animation:bgimgscroll 10s linear infinite;
	-moz-animation:bgimgscroll 10s linear infinite;
	-ms-animation:bgimgscroll 10s linear infinite;
	animation:bgimgscroll 10s linear infinite;
}

@-webkit-keyframes bgimgscroll{
    0%{background-position:0px 0px;}
	100%{background-position:0px 1000px;}
}


@-webkit-keyframes moveqiu{
	0%{-webkit-transform:translateX(-15px);}
	50%{-webkit-transform:translateX(15px);}
	100%{-webkit-transform:translateX(-15px);}
}
@-moz-keyframes moveqiu{
	0%{-moz-transform:translateX(-15px);}
	50%{-moz-transform:translateX(15px);}
	100%{-moz-transform:translateX(-15px);}
}
@-ms-keyframes moveqiu{
	0%{-ms-transform:translateX(-15px);}
	50%{-ms-transform:translateX(15px);}
	100%{-ms-transform:translateX(-15px);}
}
@keyframes moveqiu{
	0%{transform:translateX(-15px);}
	50%{transform:translateX(15px);}
	100%{transform:translateX(-15px);}
}

.left_con{width:350px;height:350px;background:url(../images/left_con.png) right top no-repeat;background-size:350px auto;position:absolute;left:-95px;top:45px;-webkit-transform:scale(0);}
.right_con{width:350px;height:350px;background:url(../images/right_con.png) left top no-repeat;background-size:350px auto;position:absolute;left:90px;top:45px;-webkit-transform:scale(0);}


.left_con.active{
	-webkit-animation:leftCon 2s linear infinite;
	-moz-animation:leftCon 2s linear infinite;
	-ms-animation:leftCon 2s linear infinite;
	animation:leftCon 2s linear infinite;
}

@-webkit-keyframes leftCon{
	0%{background-position:left top;-webkit-transform:scale(0);}
	100%{background-position:-250px 250px;-webkit-transform:scale(1.0);}
}
@-moz-keyframes leftCon{
	0%{background-position:left top;-moz-transform:scale(0);}
	100%{background-position:-250px 250px;-moz-transform:scale(1.0);}
}
@-ms-keyframes leftCon{
	0%{background-position:left top;-ms-transform:scale(0);}
	100%{background-position:-250px 250px;-ms-transform:scale(1.0);}
}
@keyframes leftCon{
	0%{background-position:left top;transform:scale(0);}
	100%{background-position:-250px 250px;transform:scale(1.0);}
}

.right_con.active{
	-webkit-animation:rightCon 2s .8s linear infinite;
	-moz-animation:rightCon 2s .8s linear infinite;
	-ms-animation:rightCon 2s .8s linear infinite;
	animation:rightCon 2s .8s linear infinite;
}

@-webkit-keyframes rightCon{
	0%{background-position:left top;-webkit-transform:scale(0);}
	100%{background-position:250px 250px;-webkit-transform:scale(1.0);}
}
@-moz-keyframes rightCon{
	0%{background-position:left top;-moz-transform:scale(0);}
	100%{background-position:250px 250px;-moz-transform:scale(1.0);}
}
@-ms-keyframes rightCon{
	0%{background-position:left top;-ms-transform:scale(0);}
	100%{background-position:250px 250px;-ms-transform:scale(1.0);}
}
@keyframes rightCon{
	0%{background-position:left top;transform:scale(0);}
	100%{background-position:250px 250px;transform:scale(1.0);}
}

.people_box{width:122px;height:200px;position:absolute;left:100px;top:180px;}
/*.people{width:122px;height:200px;background:url(../images/run.png) center top no-repeat;background-size:122px auto;position:absolute;left:0px;top:0px;z-index:2;opacity:0;}*/
.people_run{width:122px;height:200px;background:url(../images/run.gif) center top no-repeat;background-size:122px auto;position:absolute;left:0px;top:0px;z-index:2;opacity:0;}
.people_stop{width:122px;height:200px;background:url(../images/stop.png) center top no-repeat;background-size:122px auto;position:absolute;left:0px;top:0px;z-index:2;opacity:0;}
.people_ready{width:122px;height:200px;background:url(../images/ready.png) center top no-repeat;background-size:122px auto;position:absolute;left:0px;top:35px;z-index:2;}
.shadow{width:95px;height:40px;background:url(../images/shadow.png) center top no-repeat;background-size:95px auto;position:absolute;left:12px;bottom:-12px;z-index:1;}

.userrunning_box{width:115px;height:50px;position:absolute;left:15px;top:360px;z-index:10;}
.userrunning_box img{width:40px;height:40px;border:3px solid #fff;border-radius:50%;position:relative;z-index:2;}
.running_meter{width:100px;height:28px;border-radius:50px;border:1px solid #fff;position:absolute;left:20px;top:9px;background:#8d8d8d;}
.running_meter p{font-size:16px;color:#fff;text-align:right;position:relative;top:3px;right:6px;}

.running_body #web_wrap{overflow:hidden;position:relative;}

.run_btn a{width:112px;height:53px;position:absolute;z-index:10;border-radius:8px;border:2px solid #fff;}
.run_btn .left_footer{background:#fd6530;left:20px;top:420px;text-align:center;}
.run_btn .right_footer{background:#fd6530;left:190px;top:420px;text-align:center;}
.run_btn a:hover{background:#ffa800;border:2px solid #fff;-webkit-transform:scale(0.8);}
.run_btn .left_footer i{display:inline-block;width:23px;height:30px;background:url(../images/icon.png) 0px -343px no-repeat;background-size:500px auto;position:relative;top:12px;left:-3px;}
.run_btn .right_footer i{display:inline-block;width:23px;height:30px;background:url(../images/icon.png) -47px -343px no-repeat;background-size:500px auto;position:relative;top:12px;right:-3px;}
.runBtn_over{width:320px;height:70px;background-size:500px auto;position:absolute;left:0px;top:414px;z-index:11;display:none;}
.runBtn_start{width:320px;height:53px;background-size:500px auto;position:absolute;left:0px;top:420px;z-index:11;}
.run_btn a:active{opacity:0.8;}